<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="业务员" width="200">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar" shape="square" />
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="绑定手机号" width="150" />

      <el-table-column prop="shop_count" label="负责店铺(个)" width sortable>
        <template slot-scope="scope">
          <span @click="storesClick(scope.row.nickname, shopTitle, scope.row.id)">{{ scope.row.shop_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods" label="现有商品(种)" width>
        <template slot-scope="scope">
          <span @click="storesClick(scope.row.nickname, goodTitle, scope.row.id)">{{ scope.row.commodity_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sales" label="总销售额" width sortable />
      <el-table-column prop="remark" label="备注" width />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="edit" @click="handleEdit(scope)">编辑</span>
          <span class="delete" @click="forbidden(scope)">{{ scope.row.is_freeze ? '解除禁用': '禁用' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      shopTitle: '负责店铺',
      goodTitle: '现有商品'
    }
  },
  methods: {
    storesClick(name, title, id) {
      this.$emit('storesClick', name, title, id)
    },
    handleEdit(data) {
      this.$emit('edit', data)
    },
    forbidden(data) {
      this.$emit('forbidden', data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .edit {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .delete {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
    width: 60px;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar {
    margin-right: 15px;
    border: 1px solid #eee;
  }
}
.el-table /deep/ .el-table__row td {
    &:nth-child(1) {
      .cell {
        justify-content: flex-start !important;
      }
    }
  }
.el-table /deep/ .el-table__row td {
  &:nth-child(3),
  &:nth-child(4) {
    color: #409eff;
    cursor: pointer;
    span {
      width: 50px;
    }
  }
}
</style>
